<template>
  <div class="wrap">
    <div class="header">
      <div class="content">
        <p class="income" style="margin-bottom: 10px; margin-top: 20px">可提现金额(B)</p>
        <p class="income-power">00.00</p>
      </div>
      <div class="content">
        <p class="income">冻结金额(B)</p>
        <p class="income-power" style="font-size: 20px">00.00</p>
      </div>
    </div>
    <div class="form-item">
      <p class="label">提现币种</p>
      <p class="value">USDT</p>
    </div>
    <div class="form-item">
      <p class="label">提现网络</p>
      <p class="value">TRC20</p>
    </div>
    <div class="form-item">
      <p class="label">提现地址</p>
      <input class="money" type="number" v-model="bank" />
    </div>
    <div class="form-item">
      <p class="label">提现金额</p>
      <input class="money" type="number" v-model="amount" />
    </div>
    <p class="desc">最小提现金额100.00</p>

    <button class="submit" @click="submit">提交</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { walletPw } from '@/api/index.js';

  const amount = ref();
  const bank = ref('');

  const submit = () => {
    if (amount.value <= 0) {
      uni.showToast({
        icon: 'none',
        title: '输入正确金额',
      });
      return false;
    }
    walletPw({
      amount: amount.value,
      type: 1,
      addrUrl: bank.value,
    }).then((res) => {
      window.location.href = res.data.url;
    });
  };
</script>

<style lang="scss" scoped>
  .form-item {
    width: 90%;
    margin: 0 auto;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #999ca052;

    .label {
      color: #fff;
      font-size: 16px;
    }

    .value {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .submit {
    color: #fff;
    background-color: #1d803ab3;
    background-image: conic-gradient(from 1turn, rgba(88, 175, 16, 1), rgba(29, 128, 58, 1));
    height: 2.75rem;
    width: 90%;
    margin: 1.25rem auto 0;
    display: block;
  }

  .label {
    display: block;
    color: #fff;
    font-size: 14px;
  }

  .money {
    display: block;
    // flex: 2;
    width: 50%;
    height: 50px;
    font-size: 32px;
    color: #fff;
    font-weight: 500;
    border: none;
    outline: none;
    background: #1c1e22;
    text-align: right;
  }
  .desc {
    color: #fff;
    font-size: 12px;
    display: block;
    margin-top: 16px;
    margin-left: 5%;
    width: 90%;
    text-align: right;
  }
  .bank {
    width: 300px;
    height: 100px;
    background: #ffffff;
    border-radius: 12px;
    margin: 16px auto;
    border: 1px solid #e8ebf5;
    padding: 16px;
  }

  .header {
    width: 90%;
    height: 184px;
    position: relative;
    overflow: hidden;
    background: url(@/assets/image/tixian-icon.png) no-repeat;
    margin: 30px auto 0;
    background-size: cover;
  }

  .title {
    color: #181d29;
    display: block;
    margin: 32px;
    font-weight: 500;
    font-size: 36px;
  }

  .content {
    position: relative;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 15px;
    overflow: hidden;
  }

  .income {
    display: block;
    color: #fff;
    font-size: 14px;
  }

  .income-power {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    display: block;
  }
  .wrap {
    background: #1c1e22;
    height: 100vh;
    overflow-y: scroll;
  }
</style>
